<template>
  <div class="preview-container">
     <preview :itemList="formData" :formConf="formConf" />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useRoute } from 'vue-router'
import formConf from '@/components/formDesigner/custom/formConf';
import preview from '@/components/formDesigner/preview.vue';
const route = useRoute()
const formData = ref([
    {
      id: "row_1753253297629",
      _id: "row_1753253297629",
      dictionaryKey: "",
      compType: "row",
      compName: "栅格布局",
      ele: "el-row",
      compIcon: "col",
      layout: "rowItem",
      config: true,
      flex: "default",
      justify: "start",
      align: "top",
      gutter: 0,
      responsive: true,
      rowResponsive: {
        xs: 12,
        sm: 12,
        md: 12,
        lg: 5,
        xl: 7,
      },
      columns: [
        {
          index: 0,
          span: 12,
          responsive: true,
          xs: 24,
          sm: 12,
          md: 12,
          lg: 8,
          xl: 6,
          list: [
            {
              id: "fd_1753253344973",
              _id: "fd_1753253344973",
              dictionaryKey: "",
              compType: "upload",
              ele: "el-upload",
              compName: "文件上传",
              compIcon: "upload",
              viewType: "component",
              config: true,
              showLabel: true,
              label: "文件上传",
              labelWidth: 80,
              gutter: 15,
              span: 24,
              width: 100,
              action: "https://your-api.com/upload",
              multiple: false,
              name: "file",
              modelValue: [],
              required: false,
              accept: "image/*,.pdf,.doc,.docx,.xls,.xlsx",
              fileSize: 10,
              "list-type": "picture-card",
              "show-file-list": true,
              buttonText: "上传文件",
              preview: true,
              previewSize: {
                width: 120,
                height: 120,
              },
              thumbnails: true,
              maxCount: 5,
              showTip: true,
              tips: "支持图片、PDF、Word、Excel，单文件不超过10MB",
              dragUpload: false,
              withCredentials: false,
              chunkUpload: false,
              chunkSize: 5,
              layout: "colItem",
            },
          ],
        },
        {
          index: 1,
          span: 12,
          responsive: true,
          xs: 24,
          sm: 12,
          md: 12,
          lg: 18,
          xl: 18,
          list: [
            {
              id: "row_1753253377315",
              _id: "row_1753253375777",
              dictionaryKey: "",
              compType: "row",
              compName: "栅格布局",
              ele: "el-row",
              compIcon: "col",
              layout: "rowItem",
              config: true,
              flex: "default",
              justify: "start",
              align: "top",
              gutter: 0,
              responsive: true,
              rowResponsive: {
                xs: 12,
                sm: 12,
                md: 12,
                lg: 5,
                xl: 7,
              },
              columns: [
                {
                  index: 0,
                  span: 12,
                  responsive: true,
                  xs: 24,
                  sm: 12,
                  md: 12,
                  lg: 8,
                  xl: 8,
                  list: [
                    {
                      id: "fd_1753253492424",
                      _id: "fd_1753253492424",
                      dictionaryKey: "",
                      compType: "input",
                      ele: "el-input",
                      compName: "单行文本",
                      compIcon: "input",
                      viewType: "text",
                      config: true,
                      showLabel: true,
                      label: "单行文本",
                      labelWidth: 80,
                      placeholder: "请输入文本",
                      required: false,
                      maxLength: 50,
                      gutter: 15,
                      span: 24,
                      width: "100%",
                      clearable: true,
                      disabled: false,
                      readonly: false,
                      status: "normal",
                      "prefix-icon": "",
                      "suffix-icon": "",
                      modelValue: "",
                      rules: [],
                      rulesType: "default",
                      prepend: "",
                      append: "",
                      layout: "colItem",
                    },
                  ],
                },
                {
                  index: 1,
                  span: 12,
                  responsive: true,
                  xs: 24,
                  sm: 12,
                  md: 12,
                  lg: 8,
                  xl: 8,
                  list: [
                    {
                      id: "fd_1753253496780",
                      _id: "fd_1753253496780",
                      dictionaryKey: "",
                      compType: "input",
                      ele: "el-input",
                      compName: "单行文本",
                      compIcon: "input",
                      viewType: "text",
                      config: true,
                      showLabel: true,
                      label: "单行文本",
                      labelWidth: 80,
                      placeholder: "请输入文本",
                      required: false,
                      maxLength: 50,
                      gutter: 15,
                      span: 24,
                      width: "100%",
                      clearable: true,
                      disabled: false,
                      readonly: false,
                      status: "normal",
                      "prefix-icon": "",
                      "suffix-icon": "",
                      modelValue: "",
                      rules: [],
                      rulesType: "default",
                      prepend: "",
                      append: "",
                      layout: "colItem",
                    },
                  ],
                },
                {
                  index: 2,
                  span: 12,
                  responsive: true,
                  xs: 24,
                  sm: 12,
                  md: 12,
                  lg: 8,
                  xl: 8,
                  list: [
                    {
                      id: "fd_1753253499957",
                      _id: "fd_1753253499957",
                      dictionaryKey: "",
                      compType: "input",
                      ele: "el-input",
                      compName: "单行文本",
                      compIcon: "input",
                      viewType: "text",
                      config: true,
                      showLabel: true,
                      label: "单行文本",
                      labelWidth: 80,
                      placeholder: "请输入文本",
                      required: false,
                      maxLength: 50,
                      gutter: 15,
                      span: 24,
                      width: "100%",
                      clearable: true,
                      disabled: false,
                      readonly: false,
                      status: "normal",
                      "prefix-icon": "",
                      "suffix-icon": "",
                      modelValue: "",
                      rules: [],
                      rulesType: "default",
                      prepend: "",
                      append: "",
                      layout: "colItem",
                    },
                  ],
                },
                {
                  index: 3,
                  span: 12,
                  responsive: true,
                  xs: 24,
                  sm: 12,
                  md: 12,
                  lg: 8,
                  xl: 8,
                  list: [
                    {
                      id: "fd_1753253504674",
                      _id: "fd_1753253504674",
                      dictionaryKey: "",
                      compType: "input",
                      ele: "el-input",
                      compName: "单行文本",
                      compIcon: "input",
                      viewType: "text",
                      config: true,
                      showLabel: true,
                      label: "单行文本",
                      labelWidth: 80,
                      placeholder: "请输入文本",
                      required: false,
                      maxLength: 50,
                      gutter: 15,
                      span: 24,
                      width: "100%",
                      clearable: true,
                      disabled: false,
                      readonly: false,
                      status: "normal",
                      "prefix-icon": "",
                      "suffix-icon": "",
                      modelValue: "",
                      rules: [],
                      rulesType: "default",
                      prepend: "",
                      append: "",
                      layout: "colItem",
                    },
                  ],
                },
                {
                  index: 4,
                  span: 12,
                  responsive: true,
                  xs: 24,
                  sm: 12,
                  md: 12,
                  lg: 8,
                  xl: 8,
                  list: [
                    {
                      id: "fd_1753253502633",
                      _id: "fd_1753253502633",
                      dictionaryKey: "",
                      compType: "input",
                      ele: "el-input",
                      compName: "单行文本",
                      compIcon: "input",
                      viewType: "text",
                      config: true,
                      showLabel: true,
                      label: "单行文本",
                      labelWidth: 80,
                      placeholder: "请输入文本",
                      required: false,
                      maxLength: 50,
                      gutter: 15,
                      span: 24,
                      width: "100%",
                      clearable: true,
                      disabled: false,
                      readonly: false,
                      status: "normal",
                      "prefix-icon": "",
                      "suffix-icon": "",
                      modelValue: "",
                      rules: [],
                      rulesType: "default",
                      prepend: "",
                      append: "",
                      layout: "colItem",
                    },
                  ],
                },
                {
                  index: 5,
                  span: 12,
                  responsive: true,
                  xs: 24,
                  sm: 12,
                  md: 12,
                  lg: 8,
                  xl: 8,
                  list: [
                    {
                      id: "fd_1753253493722",
                      _id: "fd_1753253493722",
                      dictionaryKey: "",
                      compType: "input",
                      ele: "el-input",
                      compName: "单行文本",
                      compIcon: "input",
                      viewType: "text",
                      config: true,
                      showLabel: true,
                      label: "单行文本",
                      labelWidth: 80,
                      placeholder: "请输入文本",
                      required: false,
                      maxLength: 50,
                      gutter: 15,
                      span: 24,
                      width: "100%",
                      clearable: true,
                      disabled: false,
                      readonly: false,
                      status: "normal",
                      "prefix-icon": "",
                      "suffix-icon": "",
                      modelValue: "",
                      rules: [],
                      rulesType: "default",
                      prepend: "",
                      append: "",
                      layout: "colItem",
                    },
                  ],
                },
                {
                  index: 6,
                  span: 12,
                  responsive: true,
                  xs: 24,
                  sm: 12,
                  md: 12,
                  lg: 8,
                  xl: 8,
                  list: [
                    {
                      id: "fd_1753253506850",
                      _id: "fd_1753253506850",
                      dictionaryKey: "",
                      compType: "input",
                      ele: "el-input",
                      compName: "单行文本",
                      compIcon: "input",
                      viewType: "text",
                      config: true,
                      showLabel: true,
                      label: "单行文本",
                      labelWidth: 80,
                      placeholder: "请输入文本",
                      required: false,
                      maxLength: 50,
                      gutter: 15,
                      span: 24,
                      width: "100%",
                      clearable: true,
                      disabled: false,
                      readonly: false,
                      status: "normal",
                      "prefix-icon": "",
                      "suffix-icon": "",
                      modelValue: "",
                      rules: [],
                      rulesType: "default",
                      prepend: "",
                      append: "",
                      layout: "colItem",
                    },
                  ],
                },
                {
                  index: 7,
                  span: 12,
                  responsive: true,
                  xs: 24,
                  sm: 12,
                  md: 12,
                  lg: 8,
                  xl: 8,
                  list: [
                    {
                      id: "fd_1753253509770",
                      _id: "fd_1753253509770",
                      dictionaryKey: "",
                      compType: "input",
                      ele: "el-input",
                      compName: "单行文本",
                      compIcon: "input",
                      viewType: "text",
                      config: true,
                      showLabel: true,
                      label: "单行文本",
                      labelWidth: 80,
                      placeholder: "请输入文本",
                      required: false,
                      maxLength: 50,
                      gutter: 15,
                      span: 24,
                      width: "100%",
                      clearable: true,
                      disabled: false,
                      readonly: false,
                      status: "normal",
                      "prefix-icon": "",
                      "suffix-icon": "",
                      modelValue: "",
                      rules: [],
                      rulesType: "default",
                      prepend: "",
                      append: "",
                      layout: "colItem",
                    },
                  ],
                },
                {
                  index: 8,
                  span: 12,
                  responsive: true,
                  xs: 24,
                  sm: 12,
                  md: 12,
                  lg: 8,
                  xl: 8,
                  list: [
                    {
                      id: "fd_1753253512301",
                      _id: "fd_1753253512301",
                      dictionaryKey: "",
                      compType: "input",
                      ele: "el-input",
                      compName: "单行文本",
                      compIcon: "input",
                      viewType: "text",
                      config: true,
                      showLabel: true,
                      label: "单行文本",
                      labelWidth: 80,
                      placeholder: "请输入文本",
                      required: false,
                      maxLength: 50,
                      gutter: 15,
                      span: 24,
                      width: "100%",
                      clearable: true,
                      disabled: false,
                      readonly: false,
                      status: "normal",
                      "prefix-icon": "",
                      "suffix-icon": "",
                      modelValue: "",
                      rules: [],
                      rulesType: "default",
                      prepend: "",
                      append: "",
                      layout: "colItem",
                    },
                  ],
                },
              ],
            },
          ],
        },
      ],
    },
    {
      id: "row_1753253638790",
      _id: "row_1753253638790",
      dictionaryKey: "",
      compType: "row",
      compName: "栅格布局",
      ele: "el-row",
      compIcon: "col",
      layout: "rowItem",
      config: true,
      flex: "default",
      justify: "start",
      align: "top",
      gutter: 0,
      responsive: true,
      rowResponsive: {
        xs: 12,
        sm: 12,
        md: 12,
        lg: 5,
        xl: 7,
      },
      columns: [
        {
          index: 0,
          span: 12,
          responsive: true,
          xs: 24,
          sm: 12,
          md: 12,
          lg: 8,
          xl: 6,
          list: [
            {
              id: "fd_1753253643109",
              _id: "fd_1753253643109",
              dictionaryKey: "",
              compType: "input",
              ele: "el-input",
              compName: "单行文本",
              compIcon: "input",
              viewType: "text",
              config: true,
              showLabel: true,
              label: "单行文本",
              labelWidth: 80,
              placeholder: "请输入文本",
              required: false,
              maxLength: 50,
              gutter: 15,
              span: 24,
              width: "100%",
              clearable: true,
              disabled: false,
              readonly: false,
              status: "normal",
              "prefix-icon": "",
              "suffix-icon": "",
              modelValue: "",
              rules: [],
              rulesType: "default",
              prepend: "",
              append: "",
              layout: "colItem",
            },
          ],
        },
        {
          index: 0,
          span: 12,
          responsive: true,
          xs: 24,
          sm: 12,
          md: 12,
          lg: 8,
          xl: 6,
          list: [
            {
              id: "fd_1753253645014",
              _id: "fd_1753253645014",
              dictionaryKey: "",
              compType: "input",
              ele: "el-input",
              compName: "单行文本",
              compIcon: "input",
              viewType: "text",
              config: true,
              showLabel: true,
              label: "单行文本",
              labelWidth: 80,
              placeholder: "请输入文本",
              required: false,
              maxLength: 50,
              gutter: 15,
              span: 24,
              width: "100%",
              clearable: true,
              disabled: false,
              readonly: false,
              status: "normal",
              "prefix-icon": "",
              "suffix-icon": "",
              modelValue: "",
              rules: [],
              rulesType: "default",
              prepend: "",
              append: "",
              layout: "colItem",
            },
          ],
        },
        {
          index: 0,
          span: 12,
          responsive: true,
          xs: 24,
          sm: 12,
          md: 12,
          lg: 8,
          xl: 6,
          list: [
            {
              id: "fd_1753253647093",
              _id: "fd_1753253647093",
              dictionaryKey: "",
              compType: "input",
              ele: "el-input",
              compName: "单行文本",
              compIcon: "input",
              viewType: "text",
              config: true,
              showLabel: true,
              label: "单行文本",
              labelWidth: 80,
              placeholder: "请输入文本",
              required: false,
              maxLength: 50,
              gutter: 15,
              span: 24,
              width: "100%",
              clearable: true,
              disabled: false,
              readonly: false,
              status: "normal",
              "prefix-icon": "",
              "suffix-icon": "",
              modelValue: "",
              rules: [],
              rulesType: "default",
              prepend: "",
              append: "",
              layout: "colItem",
            },
          ],
        },
        {
          index: 0,
          span: 12,
          responsive: true,
          xs: 24,
          sm: 12,
          md: 12,
          lg: 8,
          xl: 6,
          list: [
            {
              id: "fd_1753253649246",
              _id: "fd_1753253649246",
              dictionaryKey: "",
              compType: "input",
              ele: "el-input",
              compName: "单行文本",
              compIcon: "input",
              viewType: "text",
              config: true,
              showLabel: true,
              label: "单行文本",
              labelWidth: 80,
              placeholder: "请输入文本",
              required: false,
              maxLength: 50,
              gutter: 15,
              span: 24,
              width: "100%",
              clearable: true,
              disabled: false,
              readonly: false,
              status: "normal",
              "prefix-icon": "",
              "suffix-icon": "",
              modelValue: "",
              rules: [],
              rulesType: "default",
              prepend: "",
              append: "",
              layout: "colItem",
            },
          ],
        },
      ],
    },
  ])
</script>

<style scoped>
.preview-container {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
}
</style>